<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j">

    <h:head>
        <title>Student Simple Statistics</title>
        <meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.request.contextPath}/css/styles.css"/>
        <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.request.contextPath}/css/960.css"/>
    </h:head>

    <h:body>
        <f:view>
            <div id="header" class="container_16">
                <div id="header_text" class="grid_16">
                    <span style="display: block; margin-top: 36px;">Student Simple Statistics</span>
                </div>
            </div>

            <div id="content" class="container_16">
                <div id="left_null" class="grid_3 alpha"></div>
                <div id="content_center" class="grid_10">
                    <div id="precision_block" class="grid_4 alpha">
                        <h:form prependId="false">
                            <h:outputLabel value="Precision:" for="precInput" /><br />
                            <h:inputText id="precInput" value="#{statistics.precision}" size="5">
                                <a4j:ajax event="keyup" render="precisionOut" />
                            </h:inputText><br />
                            <h:panelGroup id="precisionOut">
                                <h:outputText value="P: #{statistics.precision}"
                                              rendered="#{not empty statistics.precision}" />
                            </h:panelGroup>
                        </h:form>
                    </div>
                    <div id="input_block" class="grid_6 omega">
                        <h:form prependId="false">
                            <h:outputLabel value="Array:" for="arrayInput" /><br />
                            <h:inputText id="arrayInput" value="#{statistics.input}" size="40">
                                <a4j:ajax event="keyup" render="arrayOut,meanOut,deviationOut,intervalOut" />
                            </h:inputText><br />
                            <h:panelGroup id="arrayOut">
                                <h:outputText value="Input array: #{statistics.input}"
                                              rendered="#{not empty statistics.input}" />
                            </h:panelGroup>
                        </h:form>
                    </div>
                    <div id="clear" class="clear"></div>
                    <div id="answers_block" class="grid_10">
                        <div id="mean_block" class="grid_3 alpha">
                            <h:panelGroup id="meanOut">
                                <h:outputText value="Mean: #{statistics.mean}"
                                              rendered="#{not empty statistics.mean}" />
                            </h:panelGroup>
                        </div>
                        <div id="deviation_block" class="grid_4">
                            <h:panelGroup id="intervalOut">
                                <h:outputText value="Interval: #{statistics.interval}"
                                              rendered="#{not empty statistics.interval}" />
                            </h:panelGroup>
                        </div>
                        <div id="interval_block" class="grid_3 omega">
                            <h:panelGroup id="deviationOut">
                                <h:outputText value="Deviation: #{statistics.deviation}"
                                              rendered="#{not empty statistics.deviation}" />
                            </h:panelGroup>
                        </div>
                    </div>
                </div>
                <div id="right_null" class="grid_3 omega"></div>
            </div>

            <div id="footer" class="container_16">
                <div id="footer_text" class="grid_16">
                    <span style="display: block; margin-right: 100px;">Maxim A. Kanev &#169; 2010</span>
                </div>
            </div>
        </f:view>
    </h:body>
</html>
